---
layout: learn
redirect_from:
  - /gettingstarted.html
---

<div class="learn-container container-fluid">
  <div class="row blue-row p-5">
    <h2 class="my-3 py-0">Getting started</h2>
    <div class="pb-5 mb-2">
      Built from the ground up, Codewind, an
      <a href="https://github.com/eclipse/codewind">open source project</a>,
      helps both developers and DevOps engineers to develop, build and run
      containerized applications quickly and easily, whilst also maintaining
      application and runtime environment standards, by extending their
      Integrated Development Environment (IDE).
      <a href="overview.html">Learn more</a> or
      <a
        href="want-to-get-a-microservice-up-and-running-super-quickly-try-codewind.html"
        >see it in action</a
      >.
    </div>
    <div class="row equal-height w-100">
      <div class="col-12 col-lg-6 py-3 py-lg-0">
        <div class="card learn-card">
          <div class="card-header">
            <div class="d-flex align-items-center justify-content-between">
              <h5 class="my-2">
                Desktop and remote
              </h5>
              <div>
                <img
                  alt="Cloud icon"
                  title="cloud icon"
                  src="images/learn/icon_cloud.svg"
                />
                <img
                  alt="Desktop icon"
                  title="desktop icon"
                  src="images/learn/icon_desktop.svg"
                />
              </div>
            </div>
          </div>
          <div class="card-body d-flex flex-column">
            <p>
              Download to develop, build and run on your desktop, or to develop
              on your desktop but build and run on the cloud. Follow
              step-by-step instructions for
              <a href="vsc-getting-started.html">VS Code</a>,
              <a href="eclipse-getting-started.html">Eclipse</a>, or
              <a href="intellij-getting-started.html">IntelliJ</a>.
              Read more about <a href="gettingstarted-overview.html">local, remote, and browser-based configurations</a>.
            </p>
            <div
              class="col d-flex justify-content-start flex-column flex-xl-row"
            >
              <a
                href="https://marketplace.visualstudio.com/items?itemName=IBM.codewind"
                class="mt-auto btn btn-primary m-2"
                role="button"
              >
                VS Code
                <i class="fa fa-download button-icon"></i>
              </a>
              <a
                href="https://marketplace.eclipse.org/content/codewind"
                class="mt-auto btn btn-primary m-2"
                role="button"
              >
                Eclipse
                <i class="fa fa-download button-icon"></i>
              </a>
              <a
                href="https://plugins.jetbrains.com/plugin/13839-codewind"
                class="mt-auto btn btn-primary m-2"
                role="button"
              >
                IntelliJ
                <i class="fa fa-download button-icon"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 py-3 py-lg-0">
        <div class="card learn-card">
          <div class="card-header">
            <div class="d-flex align-items-center justify-content-between">
              <h5 class="my-2">
                Browser based
              </h5>
              <img
                alt="Cloud icon"
                title="cloud icon"
                src="images/learn/icon_cloud.svg"
              />
            </div>
          </div>
          <div class="card-body d-flex flex-column justify-content-between">
            <p>
              Download to develop, build and run entirely on the cloud. Follow
              <a href="che-installinfo.html ">step-by-step instructions</a> for Eclipse Che.
              Read more about <a href="gettingstarted-overview.html">local, remote, and browser-based configurations</a>.
            </p>
            <div
              class="col d-flex justify-content-start flex-column flex-xl-row"
            >
              <a
                href="https://github.com/eclipse/codewind-che-plugin/blob/0.13.0/setup/install_che/che-operator/codewind-checluster.yaml"
                class="mt-auto btn btn-primary m-2"
                role="button"
              >
                Eclipse Che
                <i class="fa fa-download button-icon"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row p-5">
    <h3 class="mt-0 mb-4">Get started by job role</h3>
    <div class="row equal-height">
      <div class="col-12 col-lg-4 py-3 py-lg-0">
        <div class="card learn-card">
          <div class="card-body">
            <div class="d-flex align-items-center mb-2">
              <img
                alt="Developer icon"
                title="developer icon"
                src="images/learn/icon_roleDeveloper.svg"
              />
              <h5 class="my-2">
                Developer
              </h5>
            </div>
            <p>
              If you are a developer, learn how to set up and start using
              Codewind on <a href="vsc-getting-started.html">VS Code</a>,
              <a href="eclipse-getting-started.html">Eclipse</a>,
              <a href="intellij-getting-started.html">IntelliJ</a>, or
              <a href="che-installinfo.html">Eclipse Che</a>.
            </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 py-3 py-lg-0">
        <div class="card learn-card">
          <div class="card-body">
            <div class="d-flex align-items-center mb-2">
              <img
                alt="SysAdmin icon"
                title="sysAdmin icon"
                src="images/learn/icon_roleSysAdmin.svg"
              />
              <h5 class="my-2">
                SysAdmin or Devops
              </h5>
            </div>
            <p>
              If you are a sysadmin or DevOps engineer, learn how to
              <a href="remote-deploying-codewind.html">deploy Codewind remotely</a>, or learn how to
              <a href="che-installinfo.html">
                install Codewind for Eclipse Che
              </a>.
            </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 py-3 py-lg-0">
        <div class="card learn-card">
          <div class="card-body">
            <div class="d-flex align-items-center mb-2">
              <img
                alt="Architect icon"
                title="architect icon"
                src="images/learn/icon_roleArchitect.svg"
              />
              <h5 class="my-2">
                Solution Architect
              </h5>
            </div>
            <p>
              If you are responsible for defining standards for the application
              and runtime environments, such as framework and software levels
              see,
              <a href="workingwithtemplates.html">Working with templates</a>.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row blue-row p-5">
    <a href="guides.html">
      <h3 class="mt-0 mb-4">Quick guides</h3>
    </a>
    <div class="row equal-height w-100">
      {% for post in site.guides limit:3 %}
      <div class="col-12 col-lg-4 py-3 py-lg-0">
        <div class="card learn-card">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <h5 class="my-2">
                <a href="{{post.permalink}}">
                  {{ post.title }}
                </a>
              </h5>
              <img
                alt="Guide icon"
                class="pl-2"
                title="guide icon"
                src="{{ post.icon }}"
              />
            </div>
            <ul>
              {% for obj in post.objectives %}
              <li>
                {{ obj }}
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="row learn-row p-5">
    <div class="row w-100">
      {% assign blog = site.blog | where: "title", "Sneak Peek: Remote Development with Codewind" | first %} {% assign video = site.data.videos |
      first %}
      <div class="col-lg-6">
        <a href="blog.html">
          <h3 class="mt-0 mb-4">
            Blogs
          </h3>
        </a>
        <div class="card learn-media-card">
          <div class="embed-responsive embed-responsive-16by9">
            <img
              class="blog-image"
              alt="Blog image"
              title="blog-image"
              src="{{ blog.title_img }}"
            />
          </div>
          <div class="card-body">
            <p class="card-text text-right">
              <small class="text-muted">
                {{ blog.date | date_to_string }}, length: {{ blog.duration}}
              </small>
            </p>
            <h5 class="card-title">
              <a href="{{ blog.permalink }}">
                {{ blog.title }}
              </a>
            </h5>
            <p class="card-text">
              {{ blog.description }}
            </p>
          </div>
          <div class="card-footer text-right">
            <a href="blog.html">
              ...more blogs
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <a href="https://www.youtube.com/channel/UCnKCVK6RFDyHFqUmXlAhCHQ">
          <h3 class="mt-lg-0 mt-4 mb-4">
            Videos
          </h3>
        </a>
        <div class="card learn-media-card">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe
              title="Codewind youtube video"
              src="{{ video.embed_link }}"
              class="embed-responsive-item"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            ></iframe>
          </div>
          <div style class="card-body">
            <p class="card-text text-right">
              <small class="text-muted">
                {{ video.date }}
              </small>
            </p>
            <h5 class="card-title">
              <a href="{{ video.link }}">
                {{ video.title }}
              </a>
            </h5>
            <p class="card-text">
              {{ video.description }}
            </p>
          </div>
          <div class="card-footer text-right">
            <a href="https://www.youtube.com/channel/UCnKCVK6RFDyHFqUmXlAhCHQ">
              ...more videos
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
